<template>
  <WModal ref="WModal" :title="model ? '编辑' : '添加'" :success-func="successFunc">
    <template v-slot:default>
      <a-form-item label="分组" prop="section">
        <a-input
          v-decorator="['section', { rules: [{ required: true, message: '请输入' }], initialValue: model ? model.section : '' }]"
          placeholder="分组名"
        >
          <a-select
            slot="addonAfter"
            :default-value="model ? model.section : null"
            placeholder="请选择"
            style="width: 150px"
            @change="sectionSelChange"
          >
            <a-select-option v-for="item in sections" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-input>
      </a-form-item>
      <a-form-item label="标题" prop="title">
        <a-input
          v-decorator="['title', { rules: [{ required: true, message: '请输入' }], initialValue: model ? model.title : '' }]"
          placeholder="网站名"
        />
      </a-form-item>
      <a-form-item label="URL" prop="url">
        <a-input-search
          v-decorator="['url', { rules: [{ required: true, message: '请输入' }], initialValue: model ? model.url : '' }]"
          placeholder="URL"
          search
          enter-button="跳转"
          @search="jumpClick"
        />
      </a-form-item>
    </template>
  </WModal>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import WModal, { ModalFormComType } from '@/components/global/modal/form'
import Skills from '@/models/skills'
import { Admin } from '@/config/api'

@Component({
  name: 'ComAdminWebSkills',
  components: {
    WModal
  }
})
export default class ComAdminWebSkills extends Vue {
  @Prop({ type: Array, default: () => [] }) sections!: Array<string>;
  model: Skills | null = null;
  show (model?: Skills) {
    this.model = model || null;
    (this.$refs.WModal as ModalFormComType).show()
  }

  // 跳转
  jumpClick (url: string) {
    window.open(url)
  }

  sectionSelChange (key: string) {
    (this.$refs.WModal as ModalFormComType).form.setFieldsValue({
      section: key
    })
  }

  async successFunc (values: any) {
    const p = {
      ...values
    }
    const url = this.model
      ? `${Admin.siteNavigation.curd}/${this.model._id}`
      : Admin.siteNavigation.curd
    const method = this.model ? '$put' : '$post'
    await this.$wAxios[method](url, p)
    this.$emit('success')
  }
}
</script>

<style scoped>
</style>
